<template>
  <article class="page">
    <headerbar>我的荣誉</headerbar>
    <section class="frame-content-sub no-bg">
      <section class="block pdh-3">

        <div class="mgt-10"></div>



        <div class="input-row-wrap">
          <i class="required color-red">*</i>荣誉名称：
        </div>
        <div class="input-column-wrap">
          <div class="input-wrap">
            <input type="text" readonly placeholder="请输入荣誉名称" v-model="data.honorName">
          </div>
        </div>

          <div class="mgt-2"></div>
        <div class="input-row-wrap">
          <i class="required color-red">*</i>颁奖单位：
        </div>
        <div class="input-column-wrap">
          <div class="input-wrap">
            <input type="text" readonly v-model="data.awardCompany">
          </div>
        </div>

          <div class="mgt-2"></div>
        <div class="input-row-wrap">
          <i class="required color-red">*</i>颁奖时间：
        </div>
        <div class="input-column-wrap">
          <div class="input-wrap"><input readonly type="text" v-model="honorTime"></div>
        </div>


          <div class="mgt-2"></div>

        <p class="title" style="margin-top: 20px;">支撑材料：</p>
        <noData v-if="getFiles(data.files).length===0 && getFiles(data.filesOssUrl).length===0" ></noData>
<!--        <ul class="list-item mui-content-padded flex-justify-start" v-if="data.files">-->
<!--          <li class="enclosure-upload" v-for="item in getFiles(data.files)">-->
<!--            <img  class="img" src="../../../../static/images/up_document.png" @click="downLoadFile(item)" />-->
<!--            <div class="imgs" v-saveImage  style="padding-top: 10px">
              <div class="img" v-for="(item,i) in imgAttachmentList"><img :src="tools.getImgUrl(item.fileId)" @click="showImagePreview(item.fileId)"></div>
            </div>-->
<!--          </li>-->
<!--        </ul>-->
        <div v-if="data.filesOssUrl" class="imgs" v-saveImage>
          <div class="img" v-for="(item,i) in getFiles(data.filesOssUrl)">
            <img  class="img" :src="item" @click="showImagePreview(item)" />
          </div>
        </div>
        <div v-else class="imgs" v-saveImage>
          <div class="img" v-for="(item,i) in getFiles(data.files)">
            <img  class="img" :src="tools.getImgUrl(item)" @click="showImagePreview(item)" />
          </div>
        </div>

      </section>

      <div class="pdv-10"></div>

      <div class="pdv-10"></div>

    </section>
  </article>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import fileIcon from '../../../../static/images/up_document.png'
  import moment from 'moment'

  export default {
    name: 'myHonorUpload',
    data () {
      return {
        files: [],
        attachmentList: [],
        honorLevel: '',
        honorLevelValue: '',
        honorTime: '',
        honorTimeValue: '',
        datePicker: null,
        name: '',
        honorLevelList: [],
        company: '',
        data: {}
      }
    },
    created () {
      this.data = this.$store.state.myHonorDetail
      this.honorTime = this.getTime(this.data.awardTime)
    },
    methods: {
      getTime (createTime) {
        return moment(createTime).format('YYYY-MM-DD')
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      },
      downLoadFile (item) {
        console.log("item={}", item)
        let url = this.tools.getImgUrl(item.fileId)
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(url, item.fileName)
        }
      },
      /*showImagePreview (item) {
        if (item.fileId.length < 1) {
          return false
        }
        let fileUrl = this.tools.getImgUrl(item.fileId)
        item.url = fileUrl
        let imgs = [fileUrl]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },*/
      showImagePreview (fileId) {
        if (fileId.length < 1) {
          return false
        }
        let fileUrl = this.tools.getImgUrl(fileId)
        if(this.tools.indexOfHttp(fileId)){//判断是否为oss地址，如果有，直接使用oss地址请求
          fileUrl = fileId
        }
        let imgs = [fileUrl]
        let me = this
        let instance = this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs,
          onHide: () => {
            me.tools.dialog(-1)
            me.tools.dialogDestroy()
          }
        }, (h) => {
          return h('div', {
            class: {
              "view-img-download": true,
            },
            domProps: {
              innerHTML: "下载",
            },
            on: {
              click: me.downLoadFile,
            },
            slot: "footer",
          }, '')
        }).show()
        instance.back = instance.hide
        me.tools.dialog(1, instance)
      },
      getFiles (files) {
        // debugger
        if (!files || files.trim() === '' || typeof files =='undefined') {
          return []
        }
        return files.split(',')
      },
    }
  }
</script>

<style lang="scss" scoped>
@import "@/common/stylus/moon.scss";
.imgs {
  display:flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
.img {
  width:33%;
  flex-shrink: 0;
  background:$gray-color;
  font-size:0;
  margin-right:.3%;
  margin-bottom:.3%;
img {@include fullImg();}
}

}
</style>
